<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-26 09:37:27
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-26 10:28:13
 * @FilePath: \shangyitong\src\pages\user\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="user">
		<!-- 左侧显示导航区 -->
		<div class="menu">
            <div class="top">
				<el-icon><HomeFilled /></el-icon>
				<span>/ 会员中心</span>
			</div>
			<el-menu :default-active="$route.path" class="el-menu-vertical-demo">
				<el-menu-item index="/user/certification" @click="changeActive('/user/certification')">
					<el-icon><Postcard /></el-icon>
					<span>实名认证</span>
				</el-menu-item>
				<el-menu-item index="/user/order"  @click="changeActive('/user/order')">
					<el-icon><Memo /></el-icon>
					<span>挂号订单</span>
				</el-menu-item>
				<el-menu-item index="/user/patient"  @click="changeActive('/user/patient')">
					<el-icon><User /></el-icon>
					<span>就诊管理</span>
				</el-menu-item>
				<el-menu-item index="/user/profile"  @click="changeActive('/user/profile')">
					<el-icon><Document /></el-icon>
					<span>帐号信息</span>
				</el-menu-item>
				<el-menu-item index="/user/freedback"  @click="changeActive('/user/freedback')">
					<el-icon><ChatDotRound /></el-icon>
					<span>意见反馈</span>
				</el-menu-item>
			</el-menu>
		</div>
		<!-- 右侧显示会员中心二级路由组件区域 -->
		<div class="content">
            <router-view></router-view>
        </div>
	</div>
</template>

<script setup lang="ts">
import { Document,HomeFilled, } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import {} from 'vue'
let $router = useRouter()
//获取当前是路由信息
let $route = useRoute()
//点击事件的回调
const changeActive = (path: string) => {
	$router.push({
		path,
        query:{
            // hoscode:hosCode.value 
        }
	})
}
</script>

<style lang="scss" scoped>
.user {
	display: flex;
    margin: 10px 0 0 0;
	.menu {
		flex: 2;
        display: flex;
        flex-direction: column;
		align-items: center;
        .top {
			color: #7f7f7f;
		}
	}
	.content {
		flex: 8;
	}
}
</style>
